import 'package:dailoz/constants.dart';
import 'package:dailoz/generated/l10n.dart';
import 'package:dailoz/size_config.dart';
import 'package:dailoz/utils/input_utils.dart';
import 'package:dailoz/utils/showAlertDialog.dart';
import 'package:dailoz/view_model/task_type.dart';
import 'package:dailoz/view_model/task_type_detail_view_model.dart';
import 'package:dailoz/widgets/progress_widget.dart';
import 'package:dailoz/widgets/year_month_picker.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class TaskTypeDetail extends StatefulWidget {
  const TaskTypeDetail({Key? key}) : super(key: key);

  static String id = 'taskTypeDetail';

  @override
  State<TaskTypeDetail> createState() => _TaskTypeDetailState();
}

class _TaskTypeDetailState extends State<TaskTypeDetail> {
  String? date;

  DateTime now = DateTime.now();

  TextEditingController? searchController;

  final TaskTypeDetailViewModel _taskTypeDetailViewModel =
      TaskTypeDetailViewModel();

  @override
  void initState() {
    super.initState();
    DateTime time = DateTime.now();
    searchController = TextEditingController();
    date = "${time.year}-${months[time.month - 1]}";
    _taskTypeDetailViewModel.fetchTaskByDateAndKeyword(
        now, searchController!.text);
  }

  @override
  void dispose() {
    super.dispose();
    searchController!.dispose();
    InputUtil.clear();
  }

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as TaskType;
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: ChangeNotifierProvider<TaskTypeDetailViewModel>(
        create: (_) => _taskTypeDetailViewModel,
        child: Consumer<TaskTypeDetailViewModel>(
          builder: (context, provider, _) {
            return ProgressWidget(
              loading: provider.isLoading,
              msg: S.of(context).isLoading,
              child: Stack(
                children: [
                  Positioned(
                    top: SizeConfig.getProportionateScreenHeight(56.0),
                    left: SizeConfig.getProportionateScreenWidth(30.0),
                    child: Container(
                      height: SizeConfig.getProportionateScreenHeight(42.0),
                      width: SizeConfig.getProportionateScreenWidth(42.0),
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(14.0),
                        ),
                      ),
                      child: IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: Icon(
                          Icons.arrow_back_ios_outlined,
                          size: SizeConfig.getProportionateFontSize(14.0),
                        ),
                      ),
                    ),
                  ),
                  Center(
                    child: SizedBox(
                      width: SizeConfig.getProportionateScreenWidth(327.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(
                              top:
                                  SizeConfig.getProportionateScreenHeight(66.0),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  args.taskTypeName,
                                  style: TextStyle(
                                    fontSize:
                                        SizeConfig.getProportionateFontSize(
                                            18.0),
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 25.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Container(
                                    decoration: const BoxDecoration(
                                      color: Color(0xffebebeb),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(15.0),
                                      ),
                                    ),
                                    child: TextField(
                                      controller: searchController,
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                        prefixIcon: Icon(
                                          Icons.search_outlined,
                                          color: const Color(0xffbec4d0),
                                          size: SizeConfig
                                              .getProportionateScreenHeight(
                                                  20.0),
                                        ),
                                        suffixIcon: IconButton(
                                          icon: Icon(
                                            Icons.highlight_remove_outlined,
                                            color: const Color(0xffbec4d0),
                                            size: SizeConfig
                                                .getProportionateScreenHeight(
                                                    20.0),
                                          ),
                                          onPressed: () {
                                            searchController!.clear();
                                            // getTaskByDateAndKeyword(
                                            //     now, searchController!.text);
                                            provider.fetchTaskByDateAndKeyword(
                                                now, searchController!.text);
                                          },
                                        ),
                                        hintText: S.of(context).search,
                                        hintStyle: TextStyle(
                                          color: const Color(0xffbec4d0),
                                          fontSize: SizeConfig
                                              .getProportionateFontSize(14.0),
                                        ),
                                      ),
                                      textAlignVertical:
                                          TextAlignVertical.center,
                                      onSubmitted: (newValue) {
                                        provider.fetchTaskByDateAndKeyword(
                                            provider.selectedDate,
                                            searchController!.text);
                                      },
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.only(top: 23.0, bottom: 10.0),
                            child: GestureDetector(
                              onTap: () {
                                ShowDialog.showDialog(
                                  context,
                                  YearMonthPicker(
                                    initialDate: provider.selectedDate,
                                    onDateSelected: (newTime) {
                                      InputUtil.debounce("sign", () {
                                        provider.changeSelectedDate(newTime);
                                        date =
                                            "${newTime.year}-${months[newTime.month - 1]}";
                                        provider.fetchTaskByDateAndKeyword(
                                            provider.selectedDate,
                                            searchController!.text);
                                      });
                                    },
                                  ),
                                );
                              },
                              child: Row(
                                children: [
                                  const Icon(
                                    Icons.calendar_month_outlined,
                                    color: Color(0xff4a5b84),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(left: 8.0),
                                    child: Text(
                                      date!,
                                      style: TextStyle(
                                        fontSize:
                                            SizeConfig.getProportionateFontSize(
                                                16.0),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          RefreshIndicator(
                            onRefresh: () async {
                              provider.fetchTaskByDateAndKeyword(
                                  provider.selectedDate,
                                  searchController!.text);
                            },
                            child: SizedBox(
                                height: SizeConfig.getProportionateScreenHeight(
                                    615.0),
                                child: SingleChildScrollView(
                                  physics:
                                      const AlwaysScrollableScrollPhysics(),
                                  child: provider.taskList!.isEmpty
                                      ? Center(
                                          child: Padding(
                                          padding: EdgeInsets.only(
                                            top: SizeConfig
                                                .getProportionateScreenHeight(
                                                    180.0),
                                          ),
                                          child: Text(
                                            S.of(context).noData,
                                            style: TextStyle(
                                              fontSize: SizeConfig
                                                  .getProportionateFontSize(
                                                      16.0),
                                            ),
                                          ),
                                        ))
                                      : Column(
                                          children: provider.taskList!,
                                        ),
                                )),
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
